<template>
  <div class="pageevent">
    <div class="panel-search-top">
      <el-form :inline="true" size="mini">
        <el-form-item label="类别">
          <el-select placeholder="类别">
            <el-option label="日志" value="日志"></el-option>
            <el-option label="WEB会话" value="WEB会话"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务系统">
          <el-select placeholder="业务系统">
            <el-option label="PMS-数据库-主机名" value="PMS-数据库-主机名"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="pagecontent">
      <div class="panel">
        <div class="panel-title icon-KPIindexname">
          各时间段被攻击主机次数分布图
        </div>
        <div class="panel-con">
          <div id="echart1">
            <diagram-echarts :data="diagramEcharts.echart1" :show="diagram.echart1" type="style1" bg="#fff"></diagram-echarts>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title icon-KPIindexname">
          各时间段被攻击主机详细信息
        </div>
        <div class="panel-con">
          <el-table :data="json.portraitC1">
            <el-table-column prop="c1" label="序号" width="52">
            </el-table-column>
            <el-table-column prop="c2" label="时间" width="95">
            </el-table-column>
            <el-table-column prop="c3" label="ID" width="87">
            </el-table-column>
            <el-table-column prop="c1" label="系统" width="94">
            </el-table-column>
            <el-table-column prop="c2" label="组件" width="79">
            </el-table-column>
            <el-table-column prop="c3" label="主机名称" width="100">
            </el-table-column>
            <el-table-column prop="c1" label="IP地址" width="90">
            </el-table-column>
            <el-table-column prop="c2" label="攻击类型" width="86">
            </el-table-column>
            <el-table-column prop="c3" label="详细信息">
            </el-table-column>
          </el-table>

          <div class="compage">
            <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Data from "../data/index";
import diagramEcharts from "../components/portrait/echarts";
export default {
  name: "event",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      diagram: {
        echart1: true
      },
      diagramEcharts: {
        echart1: {
          isboundaryGap: true,
          xAxisData: [
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00"
          ],
          color: ["#06BBA4", "#F89A00", "#5B96ED"],
          series: [
            {
              type: "bar",
              barWidth: 9,
              data: [
                { value: 10 },
                { value: 7 },
                { value: 10 },
                { value: 10 },
                { value: 10 },
                { value: 10 },
                { value: 10 },
                { value: 10 },
                { value: 10 }
              ]
            },
            {
              type: "bar",
              barWidth: 9,
              data: [
                { value: 5 },
                { value: 5 },
                { value: 5 },
                { value: 5 },
                { value: 5 },
                { value: 5 },
                { value: 5 },
                { value: 5 },
                { value: 5 }
              ]
            },
            {
              type: "bar",
              barWidth: 9,
              data: [
                { value: 8 },
                { value: 10 },
                { value: 10 },
                { value: 8 },
                { value: 10 },
                { value: 10 },
                { value: 8 },
                { value: 10 },
                { value: 10 }
              ]
            }
          ]
        }
      },
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {
    diagramEcharts
  }
};
</script>
<style lang="scss">
@import url(../assets/css/base.css);
</style>

<style lang="scss" scoped>
.pageevent {
  background: #fff;
}
.pagecontent {
  padding: 20px;
  #echart1 {
    height: 212px;
  }
  .panel {
    .panel-title {
      margin-top: 0px;
    }
    .panel-con {
      margin-top: 10px;
    }
  }
}
</style>
